<template>
	<view class="">
		<view class="table-heade leading-100px flex flex-x-between text-28px font-bold">
			<text class="w-1-3 text-center">排名</text>
			<text class="w-1-3 text-center">员工</text>
			<text class="w-1-3 text-center">分红金额</text>
		</view>
		<view v-for="(item,index) in state" :key="item.id" :class="index%2===0?'bg-f1f1f1':''"
			class="table-body leading-60px py-20px flex flex-x-between flex-y-center text-28px">
			<text class="w-1-3 text-center">{{index+1}}</text>
			<view class="w-1-3 text-center">
				<view>{{item?.name}}</view>
				<text class="color-blue">[{{item?.team}}]</text>
			</view>
			<view class="w-1-3 text-center">
				<view class="color-pink">
					<text class="text-40px">{{item?.money}}</text>
					<text>元</text>
				</view>
				<uv-button type="primary" size="mini" text="查看明细" @click="gotoDetail"></uv-button>
			</view>
		</view>
	</view>
</template>

<script setup name="Content">
	import {
		computed
	} from 'vue';

	const emit = defineEmits(['update:modelValue'])

	const props = defineProps({
		modelValue: {
			type: Object,
			default: () => ({}),
		},
	})

	const state = computed({
		get() {
			return props.modelValue
		},
		set(value) {
			emit('update:modelValue', value)
		},
	})

	const gotoDetail = () => {
		uni.$uv.route({
			url: '/pages/EmployeeBonus/Detail/Detail',
		})
	}
</script>